<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #div1{
      width:400px;
      height:400px;
      background:white;
    }
    body{
      margin:0;
      background: black;
    }
  </style>
</head>
<body>
<div id="div1">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <!--
      直接用line来,你会发现连接处很不自然
    -->
    <!--<line x1="50" y1="50" x2="200" y2="300" stroke="black" stroke-width="5"></line>
    <line x1="200" y1="300" x2="230" y2="300" stroke="black" stroke-width="5"></line>
    <line x1="230" y1="300" x2="250" y2="200" stroke="black" stroke-width="5"></line>-->

    <!--
      等同于↑(注意fill要设置为none或则transparent,否则是实心的),并且连接处更自然
      (你可以把每4个数值看成上面的一个line,但需要注意第3第4个值即是第一个line的x2,y2又是第二个line的x1,y1)

      每个值之间既可以用空格隔开 也可用逗号隔开
    -->
    <polyline points="50 50
                      200 300
                      230 300
                      250 200"
              stroke="black" stroke-width="5" fill="none">

    </polyline>
  </svg>
</div>
</body>
</html>
